<template>
  <div
    class="page-search"
    ref="searchRef"
    :style="{ height: isOverHeight + 'px' }"
  >
    <config-form v-bind="searchFormConfig" v-model="formData" isOver>
      <template #header>
        <span class="header">{{ searchTitle }}</span>
      </template>
    </config-form>
  </div>
  <div class="handle-btns">
    <div class="footer-btns">
      <slot name="footerBtn"></slot>
    </div>
    <div v-if="isShowFooer">
      <el-button icon="refresh" @click="handleRestClick">重置</el-button>
      <el-button type="primary" icon="Search" @click="handleQueryClick"
        >搜索</el-button
      >
      <el-button
        :icon="!isOverChange ? 'ArrowDown' : 'ArrowUp'"
        @click="handleChangeHeight"
        v-if="isOver"
      >
        {{ !isOverChange ? "展示更多" : "收起更多" }}
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, nextTick, onMounted, ref } from "vue";
import ConfigForm from "/@/base-ui/form/index.vue";
import eventBus from "/@/global/event-bus";

const props = defineProps({
  // 检索配置
  searchFormConfig: {
    type: Object,
    reuqired: true
  },
  // 检索标题
  searchTitle: {
    type: String,
    default: ""
  },
  // 是否显示展示更多
  isOver: {
    type: Boolean,
    default: false
  },
  // 收起展示几行
  isShowRowCount: {
    type: Number,
    default: 2
  }
});

const emit = defineEmits(["resetClick", "queryClick"]);

// 双向绑定的属性应该是由配置文件的field来决定
const formItems = props.searchFormConfig?.formItems ?? [];
const isShowFooer = props.searchFormConfig?.isShowFooer ?? true;
const formOriginData: any = {};
// 动态生成表单初始值
for (const item of formItems) {
  if (item.type === "switch" || item.type === "radio") {
    formOriginData[item.field] = false;
  } else if (item.type === "checkbox" || item.type === "upload") {
    formOriginData[item.field] = [];
  } else {
    formOriginData[item.field] = "";
  }
}
const formData = ref(formOriginData);
console.log("%%%%%", formData.value);

// 重置操作
const handleRestClick = () => {
  formData.value = formOriginData;
  emit("resetClick");
};

// 搜索操作
const handleQueryClick = () => {
  emit("queryClick", formData.value);
};

const searchRef = ref<HTMLElement>(); // 搜索区域
const oneHeight = eventBus.colHeight; // 单行文本高度
const searchFromHeight = ref<number>(0); // 搜索区域总高度
const isOverHeight = ref<Number>(0); // 搜索区域展示高度
const colLayout = props.searchFormConfig?.colLayout ?? {};
onMounted(() => {
  nextTick(() => {
    // 计算总高度
    const count = 24 / colLayout.span;
    const height = Math.ceil(formItems.length / count) * oneHeight;
    searchFromHeight.value = height;
    isOverHeight.value = searchFromHeight.value;
    eventBus.isOverChange = props.isOver;
    eventBus.isShowRowCount = props.isShowRowCount;
    eventBus.formItems = formItems;
    eventBus.colLayout = colLayout;
  });
});

// 收起后高度
const showRowsHeight = computed(() => props.isShowRowCount * oneHeight);
// 展示/收起更多
const isOverChange = ref(props.isOver);

const handleChangeHeight = () => {
  // 计算隐藏后高度
  isOverChange.value = !isOverChange.value;
  eventBus.isOverChange = isOverChange.value;
  eventBus.isShowRowCount = props.isShowRowCount;
  eventBus.formItems = formItems;
  eventBus.colLayout = colLayout;
  const height = isOverChange.value
    ? searchFromHeight.value
    : showRowsHeight.value;
  isOverHeight.value = height;
};
</script>

<style scoped>
.page-search {
  overflow: hidden;
  padding: 0 20px;
  transition: height 0.5s ease;
}
.handle-btns {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 20px;

  .footer-btns {
    padding-left: 20px;
  }
}
</style>
